<template>
    <el-button :type="isChecked ? 'primary' : ''" :icon="icon" @click="change" :size="size"></el-button>
</template>

<script>
export default {
  name: 'checkBox',
  data () {
    return {
      isChecked: this.checked
    }
  },
  props: {
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'mini'
    },
    checked: {
      type: Boolean,
      default: false
    },
    trueBack: {
      type: [String, Boolean, Number, Object, Array],
      default: true
    },
    falseBack: {
      type: [String, Boolean, Number, Object, Array],
      default: false
    }
  },
  watch: {
    'checked': function () {
      this.isChecked = this.checked
    }
  },
  methods: {
    change () {
      if (this.isChecked) {
        this.isChecked = false
        this.$emit('lseCheckBox', this.falseBack, this.isChecked)
      } else {
        this.isChecked = true
        this.$emit('lseCheckBox', this.trueBack, this.isChecked)
      }
    }
  },
  created () {}
}
</script>

<style scoped>

</style>
